<!--  -->
<template>
  <div class=''>

    <el-container  class="layout-container-demo" style="height: 100vh">
      <el-aside :width="!isCollapse ? '200px' : '100px'" style="background-color:#545c64;">
        <el-scrollbar>
          <MenuList :isCollapse="isCollapse" @toRoute="getTabsList" :ischeckTabs="ischeckTabsInner"></MenuList>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header style="height: 50px; line-height: 50px; background-color: #f0f0f0;">
          <div>
            <i class="el-icon-s-fold" style="vertical-align: middle; font-size: 30px;" v-show="isCollapse" @click="isCollapse = !isCollapse"></i>
            <i class="el-icon-s-unfold" style="vertical-align: middle; font-size: 30px;" v-show="!isCollapse" @click="isCollapse = !isCollapse"></i>
          </div>
          <div>
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="userLogOut">
                    退出登录
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          closable
          @tab-click="changeTabCurrent"
          @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item,index) in editableTabs"
              :key="index + new Date().getTime()"
              :label="item.title"
              :name="item.name"
              :data-item="JSON.stringify(item)"
            >
          </el-tab-pane>
        </el-tabs>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { userLogOut } from '@/api/user'
import MenuList from '@/components/MenuList'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MenuList
  },
  data () {
    // 这里存放数据
    return {
      ischeckTabsInner: null,
      isCollapse: false,
      editableTabs: [],
      editableTabsValue: '' || sessionStorage.getItem('tabsDefaultId'),
      serverForBig: '',
      liveFun: function (paramsArr) {
        const nullArr = []
        if (paramsArr instanceof Array) {
          for (const item of paramsArr) {
            nullArr.push(item.perms)
          }
        }
        return nullArr
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {

  },
  // 方法集合
  methods: {
    userLogOut () {
      userLogOut().then(res => {
        if (res.code === '200') {
          sessionStorage.clear()
          this.$router.push('/')
        }
      })
    },
    // 路由跳转的同时在header上添加tabs标签
    getTabsList (name, val, id, iTs) {
      if (name === '大屏') {
        this.serverForBig = id
        return
      }
      if (this.editableTabs === null) {
        this.editableTabs = []
        this.editableTabs.push({
          title: name,
          name: id + '',
          content: val,
          path: val,
          permissionContent: iTs.children
        })
        this.editableTabsValue = id + ''
        this.changeTabsList(this.editableTabs)
        sessionStorage.setItem('tabsDefaultId', this.editableTabsValue)
      } else {
        const result = this.queryRepeat(name, val, id)
        if (!result) {
          this.editableTabsValue = id + ''
          this.editableTabs.push({
            title: name,
            name: id + '',
            content: val,
            path: val,
            permissionContent: iTs.children
          })
          this.changeTabsList(this.editableTabs)
        } else {
          this.editableTabsValue = id + ''
        }
        sessionStorage.setItem('tabsDefaultId', this.editableTabsValue)
      }
    },
    // 避免重复的tabs
    queryRepeat (name, val, id) {
      return this.editableTabs.some((value, index, arr) => {
        return val === value.path
      })
    },
    // 删除tabs
    removeTab (targetName) {
      // 得到下标
      const result = this.editableTabs.findIndex((value, index, arr) => {
        return targetName === value.name
      })
      if (this.editableTabs.length > 1) {
        if (result > 0) {
          console.log('第一种情况')
          this.editableTabs.splice(result, 1)
          const nullArr = this.liveFun(this.editableTabs[result - 1].permissionContent)
          sessionStorage.setItem('permissionsButtonArr', JSON.stringify(nullArr))
          this.$router.push({
            path: `/${this.editableTabs[result - 1].path}`
          })
          this.changeTabsList(this.editableTabs)
          this.editableTabsValue = this.editableTabs[result - 1].name
          this.ischeckTabsInner = this.editableTabs[result - 1].name + ''
        } else {
          console.log('第二种情况')
          this.editableTabs.splice(result, 1)
          const nullArr = this.liveFun(this.editableTabs[result].permissionContent)
          sessionStorage.setItem('permissionsButtonArr', JSON.stringify(nullArr))
          this.$router.push({
            path: `/${this.editableTabs[result].path}`
          })
          this.changeTabsList(this.editableTabs)
          this.editableTabsValue = this.editableTabs[result].name
          this.ischeckTabsInner = this.editableTabs[result].name + ''
        }
      } else {
        console.log('第三种情况')
        this.editableTabs.splice(result, 1)
        this.$router.push({
          path: '/panelIndex'
        })
        this.changeTabsList(this.editableTabs)
        this.ischeckTabsInner = '1008611'
      }
      sessionStorage.setItem('tabsDefaultId', this.editableTabsValue)
    },
    // 切换tabs
    changeTabCurrent (val) {
      const myRes = JSON.parse(val.$el.dataset.item)
      const pathUrl = myRes.path
      this.ischeckTabsInner = val.$options.propsData.name + ''
      sessionStorage.setItem('tabsDefaultId', this.editableTabsValue)
      sessionStorage.setItem('permissionsButtonArr', JSON.stringify(this.liveFun(myRes.permissionContent)))
      setTimeout(() => {
        if (this.$route.path === pathUrl) {
          return false
        } else {
          this.$router.push({
            path: `/${pathUrl}`
          })
        }
      }, 0)
    },
    // sessionstorage 里面创建装tabs 的数组
    setTabsArray () {
      this.editableTabs = JSON.parse(sessionStorage.getItem('tabsListArr'))
      if (sessionStorage.getItem('tabsListArr') === null) {
        sessionStorage.setItem('tabsListArr', [])
      }
    },
    // session 改变tabs
    changeTabsList (val) {
      sessionStorage.setItem('tabsListArr', JSON.stringify(val))
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.setTabsArray()
    const pathName = window.location.hash
    if (pathName === '#/panelIndex') {
      this.isShowRightContent = false
    } else {
      this.isShowRightContent = true
    }
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.el-scrollbar {
  height: 100vh;
}
.layout-container-demo .el-header {
  position: relative;
  display: flex;
  justify-content: space-between;

}
// .layout-container-demo .el-aside {
//   color: var(--el-text-color-primary);
//   background: var(--el-color-primary-light-8);
// }
.layout-container-demo .el-menu {
  border-right: none;
}
// .layout-container-demo .el-main {
//   padding: 0;
// }
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
